<template>
	<!-- 自定义组件的使用位置 -->
	<view style="margin: 300px auto;">

		<!-- <jump-alipay-btn id="jump-alipay-plugin" :appId="appId" :bizType="bizType1" :extInfo="extInfo" style="padding: 12px;" /> -->

		<!-- <jump-alipay-btn id="jump-alipay-plugin" :appId="appId" :bizType="bizType1" :extInfo="extInfo" style="position: fixed;top: -100px;" /> -->

		<jump-alipay-btn id="jump-alipay-plugin" :appId="appId" :bizType="bizType" :extInfo="extInfo" style="opacity: 0;" />

		<button @click.stop="customeOpen">自定义事件</button>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		getCurrentInstance
	} from "vue";

	const { proxy } : any = getCurrentInstance();

	const appId = ref("2021002193693166"); // 跳转目标的appId

	const bizType = ref("pP5symj4cn"); // 场景值 - 门诊缴费

	// const bizType = ref("rVpXyf0yjJ"); // 场景值 - 预约记录

	// 传递给目标的参数
	const extInfo = ref({
		downPayment: '0.01',
		downPaymentDate: '2024-10-12',
		nickName: '测试用户',
		productName: '挂号',
		isMiniapp: '1'
	});

	// 打开复制吱口令弹窗
	function customeOpen() {
		// #ifdef MP-WEIXIN
		const { openFunc } = proxy?.selectComponent("#jump-alipay-plugin");
		openFunc();
		// #endif
	}
</script>

<style lang="scss" scoped>
	.br {
		width: 100%;
		height: 10px;
	}
</style>